

<template>
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">护理管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">护理等级</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
<!--  搜索卡片-->
  <el-card>
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="级别名称">
              <el-input v-model="nurse_grade_search.nurseName" placeholder="请输入级别名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="启用状态">
            <el-select placeholder="请输入状态" v-model="nurse_grade_search.status">
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
<!--  列表卡片-->
  <el-card>
    <el-button type="primary" @click="showGradeDialog()">新建级别</el-button>
    <el-table :data="nurse_grade_data">
      <el-table-column
          header-align="left"
          prop="nurseId"
          label="等级编号"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="levelName"
          label="级别名称"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="levelName"
          label="护理级别"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="nursePrice"
          label="护理金额"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="cycle"
          label="周期单位"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          prop="status"
          label="启用状态"
      >

      </el-table-column>
      <el-table-column
          header-align="left"
          prop="nurseRemark"
          label="护理等级说明"
      >
      </el-table-column>
      <el-table-column
          header-align="left"
          label="操作"
      >
        <template #default="scope">
          <el-button link type="primary" @click="editArchives(scope.row.id)">编辑</el-button>
          <el-button link type="danger" @click="deleteArchives(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
<!--  新建级别弹框-->
  <el-dialog :before-close="handleClose" fullscreen v-model="dialogVisible" style="background-color: #f0f2f5">
    <el-card style="position: relative;width: 800px;margin:20px auto 0 auto;height: auto;border: 0" shadow="never">

      <div style="position: absolute;background-color: #0468FF;width: 6px;
      height: 18px;border-radius: 5px;left: 25px;top: 44px;"></div>
      <div style="font-size: 18px;height: 80px;margin: 20px;">新增等级</div>

      <el-form label-width="140">
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="等级编码">
              <el-input v-model="dialogForm.nurseId" placeholder="请输入" style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级名称">
              <el-input v-model="dialogForm.roomNumber"  placeholder="请输入"
                        style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="护理金额">
              <el-input v-model="dialogForm.nursePrice" placeholder="请输入" style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="护理级别">
                <el-select style="width: 230px;">
                  <el-option value="一级">一级</el-option>
                  <el-option value="二级">二级</el-option>
                  <el-option value="三级">三级</el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="护理周期">
              <el-select style="width: 230px;">
                <el-option value="日">日</el-option>
                <el-option value="周">周</el-option>
                <el-option value="月">月</el-option>
                <el-option value="年">年</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用状态">
              <el-radio-group>
                <el-radio>启用</el-radio>
                <el-radio>禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="护理等级简介">
              <el-input type="textarea" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16"></el-col>
          <el-col :span="8">
            <el-button style="margin-left: 20px;" @click="">重置</el-button>
            <el-button type="primary" @click="">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>



  </el-dialog>
</template>
<script setup>
//搜索框数据
import {ref} from "vue";

const nurse_grade_search = ref({nurseName:'',status:undefined})

const nurse_grade_data = ref([
  {
    nurseId:'J0001',
    nurseName:'一级护理',
    levelName:'1',
    nursePrice:30.0,
    cycle:'天',
    status:1,
    nurseRemark:'这是说明....'
  },
  {
    nurseId:'J0002',
    nurseName:'二级护理',
    levelName:'1',
    nursePrice:20.0,
    cycle:'天',
    status:1,
    nurseRemark:'这是说明....'
  },
  {
    nurseId:'J0002',
    nurseName:'三级护理',
    levelName:'1',
    nursePrice:20.0,
    cycle:'天',
    status:1,
    nurseRemark:'这是说明....'
  }
])
// 新建级别弹框
const dialogVisible = ref(false);
const showGradeDialog = ()=>{
  dialogVisible.value = true
}
const handleClose = () => {
  reset()
  dialogVisible.value = false
}
const dialogForm = ref({
  nurseId: '',
  nurseName:undefined,
  nursePrice:undefined,


})
const reset = () => {
  dialogForm.value = {
    nurseId: '',
    roomNumber: '',
    bedNumber: '',
    companion: '',
    leaveTime: '',
    returnTime: '',
    status: '',
    reason: ''
  }
}
</script>
<style scoped>

</style>
